<template>
  <div>
    <h2>纪律类型</h2>
    <table border="1" style="width: 100%; border-collapse: collapse;">
      <thead>
        <tr>
          <th>ID</th>
          <th>一级分类</th>
          <th>一级分类ID</th>
          <th>二级分类</th>
          <th>二级分类ID</th>
          <th>完整分类</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in disciplineTypes" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.fir_category }}</td>
          <td>{{ item.fir_category_id }}</td>
          <td>{{ item.sec_category }}</td>
          <td>{{ item.sec_category_id }}</td>
          <td>{{ item.full_category }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import axios from 'axios';

export default {
  data() {
    return {
      disciplineTypes: [] as Array<{
        id: number;
        fir_category: string;
        fir_category_id: string;
        sec_category: string;
        sec_category_id: string;
        full_category: string;
      }>
    };
  },
  created() {
    this.fetchDisciplineTypes();
  },
  methods: {
    async fetchDisciplineTypes() {
      try {
        const response = await axios.get('http://127.0.0.1:8000/api/DisciplineType/');
        this.disciplineTypes = response.data.results;
        console.log('Discipline Types:', this.disciplineTypes);
      } catch (error) {
        console.error('Error fetching discipline types:', error);
      }
    }
  }
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: white; /* 设置表格背景颜色为白色 */
  color: black; /* 设置文字颜色为黑色 */
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2; /* 保持表头背景颜色不变 */
}

tr:nth-child(even) {
  background-color: #f9f9f9; /* 保持偶数行背景颜色不变 */
}

tr:hover {
  background-color: #f1f1f1; /* 保持悬停背景颜色不变 */
}
</style>
